<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <%@ taglib prefix="sw" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Egicom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script language="javascript" type="text/javascript">
function clearText(field) {
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script language="javascript" type="text/javascript" src="js/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="js/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
    'domready': function () { /* thumbnails example , div containers */
        new SlideItMoo({
            overallContainer: 'SlideItMoo_outer',
            elementScrolled: 'SlideItMoo_inner',
            thumbsContainer: 'SlideItMoo_items',
            itemsVisible: 5,
            elemsSlide: 3,
            duration: 200,
            itemsSelector: '.SlideItMoo_element',
            itemWidth: 140,
            showControls: 1
        });
    },

});
</script>
</head>
<body>
<div id="wrapper">
  <div id="menu">
    <ul>
      <li><a href="#" class="current"><span></span>Accueil</a></li>
      
    </ul>
	
  </div>
  <!-- end of menu -->
  
  <div id="header_bar">
  
    <div id="header">
	
      <div class="right"></div>
      <h1><a href="#"> <img src="img/logo.png" alt="" /> <span>EGICOM V1.0</span> </a></h1>
	  
    </div>
	
    <div id="search_box">
      <form action="#" method="get">
	      
	      
        <input type="text" value="Produit..." name="q" size="10" id="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
		
        <input type="submit" name="Search" value="" alt="Search" id="searchbutton" />
	<!--	<select name="thelist" id="submit_btn" >
			<option>Catégorie</option>
		</select>-->
		
      </form>
	  <!--  <input type="submit" name="login" value="Se Connecter" alt="Login" id="submit_btn" />  -->
    </div>
	<!--<div id="panier">
		<input type="submit" name="login" value="Se Connecter" alt="Login" id="submit_btn" />
	 </div>-->
  </div>
  <!-- end of header_bar -->
  
  <div class="cleaner"></div>
  <div id="sidebar">
    <div class="sidebar_top"></div>
    <div class="sidebar_bottom"></div>
    <div class="sidebar_section">
      <h2>Membres</h2>
      <form action="#" method="get">
        <label>E-mail</label>
        <input type="text" value="" name="username" size="10" class="input_field" />
        <label>Mot-de-passe</label>
        <input type="password" value="" name="password" class="input_field" />
        <a href="<%=request.getContextPath()%>/inscription.do">S'inscrire</a>
       <!-- <input type="submit" name="inscription" value="S'inscrire" alt="Inscription" id="submit_btn" />-->
        <input type="submit" name="login" value="Se Connecter" alt="Login" id="submit_btn" />
      </form>
      <div class="cleaner"></div>
    </div>
    <div class="sidebar_section">
      <h2>Categories</h2>
      <ul class="categories_list">
      	<sw:forEach items="${listeCategories}" var="o" >
        	<li><a href="<%=request.getContextPath()%>/catProducts.do?CATEGORIE_ID=${o.id}">${o.libeleCategorie}</a></li>
		</sw:forEach>
       
      </ul>
    </div>
   
  </div>
  <!-- end of sidebar -->
  <div id="content">
    <div id="latest_product_gallery">
      <h2>Nouveaux Produits</h2>
      <div id="SlideItMoo_outer">
        <div id="SlideItMoo_inner">
          <div id="SlideItMoo_items">
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_1.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_2.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_3.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_4.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_5.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_6.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_7.png" alt="" /></a> </div>
            <div class="SlideItMoo_element"> <a href="#"> <img src="img/product_8.png" alt="" /></a> </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end of latest_content_gallery -->
    <div class="content_section">
      <h2>Bienvenue à EGICOM</h2>
      
    </div>
    <div class="content_section">

	  <sw:choose>
		<sw:when test="${ViewMode=='showAll'}">
		<!-- ici on va afficher tous les produits -->
			<h2>Nos Produits </h2>
			<sw:forEach items="${listeProduits}" var="p" >
				<div class="product_box margin_r35">
				<h3>${p.libeleProduit}</h3>
				<div class="image_wrapper"> <a href="#"><img src="img/${p.image}.jpg" alt="" /></a> </div>
				<p class="">Prix:${p.prix}</p>
				<!--<a href="detailProduit?PRODUIT_ID=${p.id}">Detail</a> | <a href="#">Acheter</a> </div> -->
				<a href="<%=request.getContextPath()%>/detailProduit.do?PRODUIT_ID=${p.id}">Detail</a> | <a href="#">Acheter</a> </div>
			</sw:forEach>
			<div class="cleaner"></div>
			<div class="cleaner"></div>
			<div class="button_01"><a href="#">Afficher tout</a></div>				
		</sw:when>
		<sw:when test="${ViewMode=='detail'}">
		<!-- ici on va afficher les details d'un produit  -->
				<div class="product_box margin_r35">
				<h3>${detailProduit.libeleProduit}</h3>
				<div class="image_wrapper"> <a href="#"><img src="img/${detailProduit.image}.jpg" alt="" /></a> </div>
				<p class="Prix">${detailProduit.prix} </p>	
				<p class="">Quantité:${detailProduit.quantiteProduit}</p>	
				<p class="">Date Ajout:${detailProduit.dateAjout}</p>
				<p class="">Description:${detailProduit.description}</p>
		</sw:when>
		<sw:when test="${ViewMode=='newFournisseur'}">
				<!-- ici on va ajouter un fournisseur -->
		</sw:when>
		<sw:when test="${ViewMode=='buyProduct'}">
				<!-- ici on va ajouter le traitement coté vue pour l'achat d'un produit -->
		</sw:when>
		<sw:when test="${ViewMode=='ProductsByCategrorie'}">
				<!--<h2>This is my id: ${CATEGORIE_ID}: there is no relation between product and category in the DB </h2>-->
				<sw:forEach items="${listeProduits}" var="p" >
				<div class="product_box margin_r35">
				<h3>${p.libeleProduit}</h3>
				<div class="image_wrapper"> <a href="#"><img src="img/${p.image}.jpg" alt="" /></a> </div>
				<p class="">Prix:${p.prix}</p>
				<!--<a href="detailProduit?PRODUIT_ID=${p.id}">Detail</a> | <a href="#">Acheter</a> </div> -->
				<a href="<%=request.getContextPath()%>/detailProduit.do?PRODUIT_ID=${p.id}">Detail</a> | <a href="#">Acheter</a> </div>
			</sw:forEach>
		</sw:when>
		<sw:otherwise>Default</sw:otherwise>
	</sw:choose>
    </div>
  </div>
  <!-- end of content -->
</div>
<!-- end of wrapper -->
 <div id="footer_wrapper">
  <div id="footer">
    
    Copyright &copy; 2013 <a href="#">EGICOM</a> | Designed by <a href="http://www.templatemo.com/">egicom</a></div>
  <!-- end of footer -->
</div> 
<!-- end of footer_wrapper -->
</body>
</html>
